<template>
  <view>
    <!-- <view ref="test">你好，我是测试数据</view> -->

    <uni-section ref="test" title="插入模式" type="line"></uni-section>

    <view class="calendar-content" v-if="showCalendar">
      <text class="example-info">
        日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。
      </text>
      <uni-section title="插入模式" type="line"></uni-section>

      <view>
        <!-- 插入模式 -->
        <uni-calendar
          class="uni-calendar--hook"
          :selected="info.selected"
          :showMonth="false"
          @change="change"
          @monthSwitch="monthSwitch"
        />
      </view>

      <!-- <uni-section class="hideOnPc" title="弹出模式" type="line"></uni-section>
      <view class="example-body hideOnPc">
        <button class="calendar-button" type="button" @click="open">
          打开日历
        </button>
      </view> -->

      <!-- 被js弹出框打开的日历 -->
      <!-- <uni-calendar
        ref="calendar"
        class="uni-calendar--hook"
        :clear-date="true"
        :date="info.date"
        :insert="info.insert"
        :lunar="info.lunar"
        :startDate="info.startDate"
        :endDate="info.endDate"
        :range="info.range"
        @confirm="confirm"
        @close="close"
      /> -->
    </view>
    <!-- <uni-card>
      <text>
        这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。
      </text>
    </uni-card>

    <uni-calendar
      ref="calendar"
      :insert="false"
      :lunar="true"
      :start-date="'2019-3-2'"
      :end-date="'2019-5-20'"
      @change="change"
    />

    <button @click="open">打开日历</button> -->
  </view>
</template>

<script>
//
function getDate(date, AddDayCount = 0) {
  if (!date) {
    date = new Date()
  }
  if (typeof date !== 'object') {
    date = date.replace(/-/g, '/')
  }
  const dd = new Date(date)

  dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

  const y = dd.getFullYear()
  const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
  return {
    fullDate: y + '-' + m + '-' + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay()
  }
}
export default {
  data() {
    return {
      showCalendar: false,
      info: {
        lunar: true,
        range: true,
        insert: false,
        selected: []
      }
    }
  },
  onLoad() {
    // created
    console.log('onLoad')
  },
  async onReady() {
    // mounted 可以操作dom 但是，如果当前数据渲染之后-dom，立马获取里面的值,获取不到
    console.log('onReady')
    // $nextTick 可以保证，当前代码在更新数据之后，获取到最新更新之后的数据
    await this.$nextTick()
    this.showCalendar = true

    // setTimeout(() => {

    // }, 2000)

    // this.$nextTick - mounted() {}

    // 2.
    // TODO 模拟请求异步同步数据
    // setTimeout(() => {
    this.info.date = getDate(new Date(), -30).fullDate
    this.info.startDate = getDate(new Date(), -60).fullDate
    this.info.endDate = getDate(new Date(), 30).fullDate

    console.log('时间格式:', getDate(new Date(), -3).fullDate)
    this.info.selected = [
      {
        date: getDate(new Date(), -1).fullDate,
        info: 'day5'
      }
      // {
      //   date: getDate(new Date(), -3).fullDate,
      //   info: '打卡',
      // },
      // {
      //   date: getDate(new Date(), -2).fullDate,
      //   info: '签到',
      //   data: {
      //     custom: '自定义信息',
      //     name: '自定义消息头',
      //   },
      // },
      // {
      //   date: getDate(new Date(), -1).fullDate,
      //   info: '已打卡',
      // },
    ]
    // }, 2000)
  },
  methods: {
    open() {
      this.$refs.calendar.open()
    },
    close() {
      console.log('弹窗关闭')
    },
    change(e) {
      console.log('change 返回:', e)
      // 模拟动态打卡
      if (this.info.selected.length > 5) return
      this.info.selected.push({
        date: e.fulldate,
        info: '打卡'
      })
    },
    confirm(e) {
      console.log('confirm 返回:', e)
    },
    monthSwitch(e) {
      console.log('monthSwitchs 返回:', e)
    }
  }
}
</script>

<style lang="scss">
.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}
.calendar-button {
  flex: 1;
  font-weight: bold;
  font-size: 32rpx;
}
</style>
